<template>
	<view class="container user-editpass yuan-form">

		<view class="setting-list yuan-form-list">
			<view class="yuan-form-label yuan-label-must">原密码:</view>
			<input class="yuan-input" v-model="formData.password" type="password" placeholder="请输入原密码"
				placeholder-class="placeholder-style">
			<view class="list-ico iconfont">&#xe775;</view>
		</view>
		<view class="setting-list yuan-form-list">
			<view class="yuan-form-label yuan-label-must">新密码:</view>
			<input class="yuan-input" v-model="formData.newPassword" type="password" placeholder="请输入新密码"
				placeholder-class="placeholder-style">
			<view class="list-ico iconfont">&#xe775;</view>
		</view>
		<view class="setting-list yuan-form-list">
			<view class="yuan-form-label yuan-label-must">确认新密码:</view>
			<input class="yuan-input" v-model="formData.copyPassword" type="password" placeholder="请再次输入新密码"
				placeholder-class="placeholder-style">
			<view class="list-ico iconfont">&#xe775;</view>
		</view>
		<view class="bottom-btn-box">
			<view class="yuan-btn btn-primary bottom-btn" @click="clickSave">保存信息</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import api from '../../common/api';
	import { getStorage, hideLoading, setStorage, showLoading, showToast } from '../../common/util';
	import commonStore from '../../store/commonStore';
	const formData = reactive<any>({})
	onMounted(async () => {
		getUserInfo()
	})
	const userInfo = ref<any>({})
	const getUserInfo = async () => {
		userInfo.value = getStorage('userInfo') || {}
		formData.name = userInfo.value.nickName
	}
	const clickSave = async () => {
		if (formData.newPassword !== formData.copyPassword) {
			showToast("新密码和重复密码不一致，请检查后重试");
			return;
		}
		showLoading()
		try {
			const res = await api.editUserInfo({
				...formData
			})
			showToast('密码修改成功',{},()=>{
				logOut()
			})
			
		} finally {
			hideLoading()
		}
	}
	const logOut = () => {
		setStorage("userAuth", '');
		setStorage("userInfo", '');
		commonStore.commit('addReload', 'userIndex')
		commonStore.commit('addReload', 'index')
		uni.switchTab({
			url: '/pages/user/index'
		})
	}
</script>

<style lang="scss">
	.user-editpass {
		padding: 30rpx;

		.setting-list {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0 8rpx 10rpx 0 rgba(0, 0, 0, 0.1);
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 20rpx 20rpx;
			border-radius: 8rpx;
			width: 100%;
		}

		.list-title {
			font-size: 30rpx;
			color: #8F8F8F;
		}

		.list-info {
			flex-grow: 1;
			text-align: right;
			font-size: 26rpx;
			color: #232323;
		}

		.list-ico {
			font-size: 28rpx;
		}


		.bottom-btn-box {
			margin-top: 100px;
		}

		.bottom-btn {
			height: 88rpx;
			border-radius: 88rpx;
			margin-bottom: 30rpx;
		}
	}
</style>